<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <LINK rel="Bookmark" href="${ctxStatic}/yuansheng.ico" />
    <LINK rel="Shortcut Icon" href="${ctxStatic}/yuansheng.ico" />

    <title>${fns:getConfig('productName')}</title>

    <link href="${ctxStatic}/kitadmin/plugins/layui/css/layui.css" rel="stylesheet" />
    <link href="${ctxStatic}/kitadmin/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" />

    <link href="${ctxStatic}/kitadmin/plugins/sideshow/css/normalize.css" rel="stylesheet" />
    <link href="${ctxStatic}/kitadmin/plugins/sideshow/css/demo.css" rel="stylesheet" />
    <link href="${ctxStatic}/kitadmin/plugins/sideshow/css/component.css" rel="stylesheet" />
    <!--[if IE]>
        <script src="${ctxStatic}/kitadmin/plugins/sideshow/js/html5.js"></script>
    <![endif]-->
    <link href="${ctxStatic}/kitadmin/css/loginH5.css" rel="stylesheet" />
</head>
<body class="kit-login-bg">
    <div class="container demo-1">
        <div class="content">
            <div id="large-header" class="large-header">
                <canvas id="demo-canvas"></canvas>
                <div class="kit-login-box">
                    <header>
                        <h1>${fns:getConfig('productName')} LOGIN</h1>
                    </header>
                    <div class="kit-login-main">
                        <form action="" class="layui-form" method="post" id="loginForm">
                            <div class="layui-form-item">
                                <label class="kit-login-icon">
                                    <i class="layui-icon">&#xe612;</i>
                                </label>
                                <input type="text" name="username" value="${username}" lay-verify="required|username" autocomplete="off" placeholder="这里输入用户名." class="layui-input required">
                            </div>
                            <div class="layui-form-item">
                                <label class="kit-login-icon">
                                    <i class="layui-icon">&#xe642;</i>
                                </label>
                                <input type="password" name="password" lay-verify="required|password" autocomplete="off" placeholder="这里输入密码." class="layui-input required">
                            </div>
                            <div class="layui-form-item">
                                <label class="kit-login-icon">
                                    <i class="layui-icon">&#xe642;</i>
                                </label>
                                <input type="text" name="validateCode" lay-verify="required" autocomplete="off" placeholder="输入右侧验证码." class="layui-input required">
                                <span class="form-code" id="changeCode" style="position:absolute;right:2px; top:2px;">
                                    <img src="${pageContext.request.contextPath}/validateCodeServlet" id="refImg" style="cursor:pointer;height: 34px;" title="点击刷新"/>
                                </span>
                            </div>
                            <div class="layui-form-item">
                                <div class="kit-pull-left kit-login-remember">
                                    <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" checked title="记住帐号?">
                                </div>
                                <div class="kit-pull-right">
                                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="login">
                                        <i class="fa fa-sign-in" aria-hidden="true"></i> 登录
                                    </button>
                                </div>
                                <div class="kit-clear">

                                </div>
                            </div>
                        </form>
                    </div>
                    <footer>
                        <p>BootJeesite © <a href="https://gitee.com/timoZt/BootJeesite" style="color:white; font-size:18px;" target="_blank">${fns:getConfig('productName')}</a></p>
                        <div style="margin-left: 100px;">
                            <sys:message content="${message}"/>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </div>
    <!-- /container -->

    <script src="${ctxStatic}/kitadmin/plugins/layui/layui.js"></script>
    <script src="${ctxStatic}/kitadmin/plugins/sideshow/js/TweenLite.min.js"></script>
    <script src="${ctxStatic}/kitadmin/plugins/sideshow/js/EasePack.min.js"></script>
    <script src="${ctxStatic}/kitadmin/plugins/sideshow/js/rAF.js"></script>
    <script src="${ctxStatic}/kitadmin/plugins/sideshow/js/demo-1.js"></script>

    <script src="${ctxStatic}/thirdparty/jquery/1.9.1/jquery.js" type="text/javascript" ></script>
    <script src="${ctxStatic}/thirdparty/validform/jquery.validate.js" type="text/javascript" ></script>
    <script src="${ctxStatic}/thirdparty/validform/validate-methods.js" type="text/javascript" ></script>
    <script>
        layui.use(['layer','form'], function() {
            var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form;

            $('#changeCode').on('click', function() {
                $('#changeCode > img')[0].src = '${pageContext.request.contextPath}/validateCodeServlet?'+new Date().getTime();
            });
            $('#changeCode').on('mouseover',function(){
                layer.tips('点击刷新验证码', this,{time:1000});
            });

            var index = layer.load(2, {shade: [0.3, '#333']});
            $(window).on('load', function() {
                layer.close(index);
                $("#loginForm").validate({
                    rules: {
                        validateCode: {remote: "${pageContext.request.contextPath}/validateCodeServlet"}
                    },
                    messages: {
                        username: {required: "请填写用户名."},
                        password: {required: "请填写密码."},
                        validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
                    },
                    errorLabelContainer: "#messageBox",
                    errorPlacement: function(error, element) {
//                       layer.tips(error[0].innerText, element, {
//                             tips: [1, '#3595CC'],
//                             tipsMore: true,
//                             time: 1000
//                         });
//                        error.appendTo($("#loginError").parent());
//                        $("#messageBox").text("输入有误，请先更正。");
                         if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                            error.appendTo(element.parent().parent());
                         } else {
                            error.insertAfter(element);
                         }
                    }
                });
                form.verify({
                    username: function(value, item){ //value：表单的值、item：表单的DOM对象
                        if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                            return '用户名不能有特殊字符';
                        }
                        if(/(^\_)|(\__)|(\_+$)/.test(value)){
                            return '用户名首尾不能出现下划线\'_\'';
                        }
                        if(/^\d+\d+\d$/.test(value)){
                            return '用户名不能全为数字';
                        }

                    }
                    //我们既支持上述函数式的方式，也支持下述数组的形式
                    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                    ,password: [/^[\S]{5,12}$/,'密码必须5到12位，且不能出现空格']
                });
//                form.on('submit(login)', function(data) {
//                    var loadIndex = layer.load(2, {
//                        shade: [0.3, '#333']
//                    });
////                    location.href = '/';
//                    $.post(data.form.action, data.field, function(res) {
//                         if (!res.rel) {
//                             layer.msg(res.msg, {
//                                 icon: 2
//                             });
//                             loadIndex && layer.close(loadIndex);
//                             $('#changeCode').click(); //刷新验证码
//                         } else {
//                             setTimeout(function() {location.href = '/'}, 1500);
//                         }
//                    }, 'json');
//                    return false;
//                });
            }());
        });
    </script>


</body>
</html>
